<template>
  <div class="body_bgi full p_10 bgc_f4f4f4">
    <div class="w_full h_full scroll_box overflow_y_auto">
      <div class="w_full p_10 filter_form">
        <van-field v-model="sheepNumber" label="羊编号" placeholder="请输入羊编号" />
      </div>

      <div class="w_full p_10">
        <div 
          class="w_full h_50 lh_50 font_zh fs_30 text_center mb_10 ls_3 border_radius_20" 
          :class="[item.id == contestId ? 'main_bgc' : 'bgc_fff']"
          v-for="(item, index) in contestList" :key="index"
          @click="clickContestName(item)"
        >
          <div v-show="item.isType == 0">{{ item.name }}比赛</div>
        </div>
      </div>

      <div 
        class="w_90_p m_0_auto h_50 lh_50 text_center ph_20 fw_bold color_fff bgc_f00 mt_20 border_radius_10" 
        @click="filter()">
        查询
      </div>

      <div class="w_full text_center p_10 main_text fs_24" v-if="rankData.rank">
        <div class="h_60 lh_60 fw_bold fs_40 main_color">当前排名： {{ rankData.rank }}</div> 

        <div class="w_90_p m_0_auto h_50 lh_50 ph_20 fw_bold main_color main_border mt_20 border_radius_10" @click="showDetail()">
          查看详情
        </div>
      </div>
    </div>

    <!-- 查看评分信息 -->
    <van-dialog v-model="showsDetailDialog" title="评分详情" show-cancel-button @confirm="showDetailDialog=false">
      <div class="w_full ph_10 mv_20 fs_22">
        <div class="w_full flex_row_start pb_10">
          <div class="w_50_p pr_5 text_right">体型：</div>
          <div class="w_50_p pl_5 pt_3">{{ rankData.tiXing }}</div>
        </div>
        <div class="w_full flex_row_start pb_10">
          <div class="w_50_p pr_5 text_right">弯曲度：</div>
          <div class="w_50_p pl_5 pt_3">{{ rankData.wanQu }}</div>
        </div>
        <div class="w_full flex_row_start pb_10">
          <div class="w_50_p pr_5 text_right">油汗：</div>
          <div class="w_50_p pl_5 pt_3">{{ rankData.oilSweat }}</div>
        </div>
        <div class="w_full flex_row_start pb_10">
          <div class="w_50_p pr_5 text_right">均匀度：</div>
          <div class="w_50_p pl_5 pt_3">{{ rankData.uniformity }}</div>
        </div>
        <div class="w_full flex_row_start pb_10">
          <div class="w_50_p pr_5 text_right">腹毛：</div>
          <div class="w_50_p pl_5 pt_3">{{ rankData.fuMao }}</div>
        </div>
      </div>
    </van-dialog> 
  </div>
</template>

<script>
  import { getContestList, getSheepRank } from '@/api/index.js'
  import { Toast } from 'vant'

  export default {
    name: 'sheepRank',
    data() {
      return {
        contestId: null,
        sheepNumber: '',

        contestList: [],

        rankData: {},

        showsDetailDialog: false
      }
    },
    
    async mounted() {
      // 获取 比赛列表
      this.getContestList()
    },
    destroyed() {
      // 断开 websocket 链接 状态
      window.sessionStorage.setItem('websocket_state', 2)
    },
    methods: {
      // 获取 选手列表
      async getContestList() {
        let res = await getContestList()
        try {
          if (res.code == 1000) {
            this.contestList = res.data.filter(item => item.isType == 0)
          }
        } catch(err) {
          console.log('获取活动列表失败 : ', err);
        }
      },

      // 获取 羊 排名
      async getSheepRank(contestId, sheepNumber) {
        let sheep_str_number = sheepNumber.toString()
        
        let format_sheepNumber = ''
        if (sheep_str_number.length == 1) {
          format_sheepNumber = '00' + sheep_str_number
        } else if (sheep_str_number.length == 2) {
          format_sheepNumber = '0' + sheep_str_number
        } else if (sheep_str_number.length == 3) {
          format_sheepNumber = sheep_str_number
        } else {
          Toast.fail('羊编号错误！')
          return false
        }
        let res = await getSheepRank(contestId, format_sheepNumber)
        try {
          if (res.code == 1000) {
            if (res.data.rank) {
              this.rankData = res.data
            } else {
              Toast.fail('暂无当前羊排名')
            }
          }
        } catch(err) {
          console.log('获取羊排名失败 : ', err);
        }
      },

      // 点击比赛名称
      clickContestName(item) {
        this.contestId = item.id
      },

      filter() {
        if (this.sheepNumber != '' && this.contestId) {
          this.getSheepRank(this.contestId, this.sheepNumber)
        } else if (!this.sheepNumber) {
          Toast.fail('请输入羊编号！')
        } else if (!this.contestId) {
          Toast.fail('请选择比赛！')
        }
      },

      showDetail() {
        this.showsDetailDialog = true
      },

      goToPage(path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style>
  .van-cell__title > span { font-size: 1.5rem !important; }
  .van-cell { padding: 20px 10px; }
  .van-field__body > input { font-size: 1.5rem !important; }
  .filter_form > .van-cell {
    border-radius: 10px;
  }
</style>